<template>
	<el-card shadow="never" header="个人信息">
		<el-form ref="form" :model="user" :rules="rules" label-width="120px" style="margin-top:20px;">
			<el-form-item label="头像：" prop="avatar">
				<sc-upload v-model="user.picture" title="上传头像"></sc-upload>
			</el-form-item>
			<el-form-item label="账号：" prop="userName">
				<el-input v-model="user.userName" ></el-input>
				<!-- <div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div> -->
			</el-form-item>
			<el-form-item label="姓名：" prop="name">
				<el-input v-model="user.name"></el-input>
			</el-form-item>
			<el-form-item label="手机：" prop="mobile">
				<el-input v-model="user.mobile"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSave">保存</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import { verifyPhone } from '@/utils/verificate'
	export default {
		data() {
			return {
				user:{},
				rules: {
					userName: [
						{required: true, message: '请输入账号'}
					],
					name: [
						{required: true, message: '请输入姓名'}
					],
					mobile: [
						{required: true, message: '请输入手机号码'},
						{ validator: verifyPhone, trigger:'blur' }
					]
				},
			}
		},
		mounted() {
			let user = this.$TOOL.data.get("USER_INFO") || {}
			this.user = user
		},
		methods: {
			onSave() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						let form = this.user
						let saveInfo = await this.$API.common.saveUserInfo.put(form)
						if(saveInfo.code == 0) {
							this.$message.success("保存成功")
							// 用户信息
							await this.$store.dispatch('getInfo')
						}
					}
				})

			},
		}
	}
</script>

<style scoped>s
.el-avatar--circle {background: none !important;}
</style>

